<template>
  <el-card>
    <div slot="header">
      <h3>准入SPU查看单据-图文信息</h3>
    </div>
    <div>
      <el-divider content-position="left">SPU图片</el-divider>
      <div class="spu-image-wrap">
        <el-row>
          <span>商品主图片（未精修）</span>
          <Upload readOnly :defaultList="spuImage.mainNoTrim" />
        </el-row>
        <el-row>
          <span>商品主图片（精修）</span>
          <Upload readOnly :defaultList="spuImage.mainTrim" />
        </el-row>
        <el-row>
          <span>商品多角度图（未精修）</span>
          <Upload readOnly :defaultList="spuImage.multiAngleNoTrim" />
        </el-row>
        <el-row>
          <span>商品多角度图（未精修）</span>
          <Upload readOnly :defaultList="spuImage.multiAngleTrim" />
        </el-row>
      </div>
      <el-divider content-position="left">SKU图片</el-divider>
      <el-row>
        <SkusTable
          showPagination
          :loading="TableInfo.loading"
          :data-source="TableInfo.list"
          :columns="TableInfo.columns"
          :pageSizes="pageSizes"
          :pagination="pagination"
          :total="pagination.total"
          @pageChange="handlePageChange"
          @pageSizeSelect="handlePageSizeChange"
        />
      </el-row>
      <el-divider content-position="left">详情信息</el-divider>
      <div class="quill-wrap">
        <IQuill v-model="quillDetails" readOnly :toolbar="false" />
      </div>
    </div>
    <PreviewImageDialog
      :visible.sync="previewImage.visible"
      :image-url="previewImage.imageUrl"
    />
  </el-card>
</template>
<script>
import IQuill from '@/components/quill'; // 编辑器组件
import PreviewImageDialog from './PreviewImageDialog';
import Upload from '@/components/common/upload'; // 上传组件
import SkusTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { TableInfo } from '@/utils/getUtils';
import { commonRequest } from '@/api/commonHttp';
export default {
  mixins: [ skusPage ],
  components: {
    IQuill,
    PreviewImageDialog,
    Upload,
    SkusTable
  },
  data () {
    return {
      spuNo: '',
      recordNo: '',
      productName: '',
      spuImage: {},
      TableInfo: new TableInfo(),
      previewImage: {
        visible: false,
        imageUrl: ''
      },
      quillDetails: ''
    }
  },
  created () {
    this.setSkuTableColumns()
  },
  mounted () {
    this.spuNo = this.$route?.query?.spuNo ?? ''
    this.recordNo = this.$route?.query?.recordNo ?? ''
    this.loadImageDetails()
    this.getTableData()
  },
  methods: {
    // 加载图文详情
    async loadImageDetails () {
      const data = { recordNo: this.recordNo, spuNo: this.spuNo }
      const res = await commonRequest({
        url: '/sysback/commit/record/getPrepareSpuPicInfo',
        type: 'get',
        data,
      })
      this.productName = res?.retData?.productName
      this.quillDetails = res?.retData?.picInfo?.descriptionUpdate?.description
      this.setSpuImagesInfo(res?.retData?.picInfo)
    },
    // 设置SPU图片信息
    setSpuImagesInfo (spuImages) {
      const getMainList = list => list.map(url => ({ url })) // 获取格式化商品主图片集合
      // 获取格式化商品多角度图集合
      const getMultiAngleList = (list, trimming) =>
        _.sortBy(list, ['position'])
        .filter(item => item?.trimming == trimming)
        .map(item => ({ url: item.basicImageKey }))
      const { mainImageUpdate, multiImageUpdateList } = spuImages ?? {}
      this.$set(this.spuImage, 'mainNoTrim', getMainList([mainImageUpdate?.mainImageKey ?? ''])) // 商品主图片（未精修）
      this.$set(this.spuImage, 'mainTrim', getMainList([mainImageUpdate?.trimmingKey ?? ''])) // 商品主图片（精修）
      this.$set(this.spuImage, 'multiAngleNoTrim', getMultiAngleList(multiImageUpdateList, '1')) // 商品多角度图（未精修）
      this.$set(this.spuImage, 'multiAngleTrim', getMultiAngleList(multiImageUpdateList, '2')) // 商品多角度图（精修）
    },
    // 设置SKU图片表格表列
    setSkuTableColumns () {
      const columns = [
        { title: 'SKU编码', key: 'skuNo' },
        { title: 'SKU名称', key: 'skuName', width: 150 },
        {
          title: 'SKU图片',
          width: 300,
          notShowTip: true,
          render: (h, { row }) => {
            // sku图片集合
            const skuImageList =
              _.sortBy(row.skuImageUpdateList, ['position'])
              .map(item => `${this.IMAGEURL}${item.basicImageKey}?${this.XOSSPROCE}`)
            // 预览SKU图片大图
            const handlePreviewSkuImage = url => {
              this.previewImage.visible = true
              this.previewImage.imageUrl = url
            }
            return (<div class="sku-image-wrap">{
              skuImageList.map(
                url => <img src={url} onClick={() => { handlePreviewSkuImage(url) }} />
              )
            }</div>)
          }
        }
      ]
      this.TableInfo.setColumns(columns)
    },
    // 获取SKU图片数据集合
    getTableData () {
      const data = {
        recordNo: this.recordNo,
        spuNo: this.spuNo,
        ...this.paginationParams
      }
      this.setSkuImageList(data)
    },
    // 设置SKU图片数据集合
    async setSkuImageList (data) {
      const res = await commonRequest({
        url: '/sysback/commit/record/getPrepareSkuPicInfo',
        type: 'post',
        data,
        loadingFn: this.TableInfo.setLoading
      })
      this.TableInfo.setList(res?.retData?.results ?? [])
      this.setTotalNum(res?.retData?.totalNum ?? 0)
    }
  }
}
</script>
<style lang="less" scoped>
.spu-image-wrap {
  .el-row {
    display: flex;
    span {
      display: inline-block;
      min-width: 160px;
      text-align: right;
    }
  }
}
.quill-wrap {
  height: 850px;
}
/deep/ .cell:nth-child(3) {
  display: inline-flex !important;
  overflow: hidden !important;
  overflow-x: auto !important;
}

/deep/ .sku-image-wrap {
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
  text-align: center;

  img {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 4px;
  }
}
</style>
